<template>
<div>

<el-row>
	<el-col :span="24">
		<span class="h2">型号列表</span>
		<span class="h4 info ml10">产品包含的型号，
		例如：正价票，半价票，正价含餐等等。</span>
	</el-col>
</el-row>

<div class="model mt10 mb10">
<el-collapse v-model="activeName" accordion style="border:none;">
  <el-collapse-item v-for="(item, index) in modellist" :name="index">
  	<template slot="title">
      	{{item.attr_name}} 
      	<template v-if="productDetail.price_type == '0'">
      	<el-tag type="info" class="ml10">
      		同业：{{item.cost_price}}, 售价：{{item.guide_price}}
      	</el-tag>

      	<el-tag v-if="item.state == '1'" type="success" class="ml10">上架中</el-tag>
      	<el-tag v-if="item.state != '1'" type="danger" class="ml10">下架中</el-tag>

      	<el-tag v-if="item.stock_type == '1'" type="info" class="ml10">
      		库存：{{item.current_stock_num}} 件
      	</el-tag>

      	<el-tag v-if="item.order_num_state != undefined && item.order_num_state != '0'"  class="ml10">
      		<span v-if="item.order_num_state == '1'">平台限制</span>
      		<span v-if="item.order_num_state == '2'">商家限制</span>
      		每个
      		<span v-if="item.order_limit_type == '0'">手机号</span>
      		<span v-if="item.order_limit_type == '1'">身份证</span>
      		最多购买 {{item.order_limit_num}} 件
      	</el-tag>
      	</template>

    </template>

    <el-form :ref="'item' + index" :rules="rules" :model="item" class="mt20" label-width="165px">

		<el-form-item label="型号名称：" prop="attr_name" >
			<el-input v-model="item.attr_name" placeholder="请输入产品名称" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="型号备注："  >
			<el-input v-model="item.remark" placeholder="在收入报表中体现，不必填" style="width:300px;"></el-input>
		</el-form-item>

		<template v-if="productDetail.price_type == '0'">
		<el-form-item label="同业价格：" prop="cost_price" >
			<!-- 型号在下架状态才能修改价格 -->
			<el-input v-if="item.state != '1'"
			v-model.number="item.cost_price" placeholder="请输入产品同业价格" style="width:300px;"></el-input>

			<span v-if="item.state == '1'">{{item.cost_price}}</span>

			<el-tooltip v-if="item.state == '1'"
			class="item" effect="dark" placement="right"
		    content="由于涉及到佣金，该型号下架后才能修改价格" >
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>
		</el-form-item>

		<el-form-item label="商城价格：" prop="guide_price" >
			<!-- 型号在下架状态才能修改价格 -->
			<el-input v-if="item.state != '1'"
			v-model.number="item.guide_price" placeholder="请输入产品商城价格" style="width:300px;"></el-input>

			<span v-if="item.state == '1'">{{item.guide_price}}</span>

			<el-tooltip v-if="item.state == '1'"
			class="item" effect="dark" placement="right"
		    content="由于涉及到佣金，该型号下架后才能修改价格" >
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>
		</el-form-item>

		<el-form-item label="排序："  >
			<el-input v-model="item.asort" placeholder="数越大越靠前" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="启用库存：" prop="current_stock_num" >
		    <el-switch v-model="item.stock_type"
		    active-value="1" inactive-value="0"></el-switch>

		    <el-input v-if="item.stock_type == '1'" class="ml20"
		     v-model.number="item.current_stock_num" placeholder="请输入该型号库存" style="width:236px;"></el-input>
		</el-form-item>

		<el-form-item label="购买限制：" >
		    <el-radio-group v-model="item.order_num_state" size="small">
		      <el-radio-button :label="0">不限制</el-radio-button>
		      <el-radio-button :label="1">平台限制</el-radio-button>
		      <el-radio-button :label="2">商家限制</el-radio-button>
		    </el-radio-group>
		</el-form-item>

		<el-form-item v-if="item.order_num_state != 0" label="限制数量：" prop="order_limit_num" >
			<el-input v-model.number="item.order_limit_num" placeholder="请输入购买限制数量" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item v-if="item.order_num_state != 0" label="限制方式：">
		    <el-radio-group v-model="item.order_limit_type" size="small">
		      <el-radio-button :label="0">手机号</el-radio-button>
		      <el-radio-button :label="1">身份证</el-radio-button>
		    </el-radio-group>
		</el-form-item>


		

		</template>

		<!-- 对接信息 -->
		<!-- 票付通 -->
		<template v-if="productDetail.sale_belong == 'weshop_piaofutong'">
		<el-form-item label="商品供应商id：" >
			<el-input v-model="item.sysaffirm_target_goods_supply" placeholder="请输入供应商id" style="width:300px;"></el-input>
			<el-tag class="ml10">票付通对接信息</el-tag>
		</el-form-item>

		<el-form-item label="商品景区id：" >
			<el-input v-model="item.sysaffirm_target_goods_view" placeholder="请输入景区id" style="width:300px;"></el-input>
			<el-tag class="ml10">票付通对接信息</el-tag>
		</el-form-item>

		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">票付通对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 票付通 -->


		<!-- 天时同城 -->
		<template 
		v-if="productDetail.sale_belong == 'weshop_tstc_al' || productDetail.sale_belong == 'weshop_tstc_bg'">
		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">天时同城对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 天时同城 -->


		<!-- 居游 -->
		<template 
		v-if="productDetail.sale_belong == 'weshop_juyou'">
		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">居游对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 居游 -->

		<!-- 海洋馆 -->
		<template 
		v-if="productDetail.sale_belong == 'weshop_royaloc'">
		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">海洋馆对接信息</el-tag>
		</el-form-item>

		<el-form-item label="成人/儿童：">
		    <el-radio-group v-model="item.sysaffirm_target_goods_child_flag">
		      <el-radio label="0" >成人</el-radio>
		      <el-radio label="1" >儿童</el-radio>
		    </el-radio-group>
		    <el-tag class="ml10">海洋馆对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 海洋馆 -->

		<!-- 银科环企 -->
		<template v-if="productDetail.sale_belong == 'weshop_yinkehuanqi'">
		<el-form-item label="商品景区id：" >
			<el-input v-model="item.sysaffirm_target_goods_view" placeholder="请输入景区id" style="width:300px;"></el-input>
			<el-tag class="ml10">银科环企对接信息</el-tag>
		</el-form-item>

		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">银科环企对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 银科环企 -->

		<!-- 自游宝 -->
		<template 
		v-if="productDetail.sale_belong == 'weshop_zhiyoubao'">
		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">自游宝对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 自游宝 -->

		<!-- 自我游 -->
		<template 
		v-if="productDetail.sale_belong == 'weshop_ziwoyou'">
		<el-form-item label="商品id：" >
			<el-input v-model="item.sysaffirm_target_goods_code" placeholder="请输入商品id" style="width:300px;"></el-input>
			<el-tag class="ml10">自我游对接信息</el-tag>
		</el-form-item>
		</template>
		<!-- 自我游 -->


		<!-- 对接信息 -->

		<el-form-item>
		    <el-button type="primary" @click="onSubmit(item, 'item' + index)"
		    size="small">确认修改</el-button>
		    <el-button v-if="item.state == '1'" type="danger" size="small"
		    @click="down(item, 'item' + index)">确认修改并下架</el-button>
		    <el-button v-if="item.state != '1'" type="success" size="small"
		    @click="up(item, 'item' + index)">确认修改并上架</el-button>

		</el-form-item>
	</el-form>

<el-row v-if="productDetail.price_type == '1' && item.attr_id != undefined" :gutter="20">
<el-col :span="4" class="text-right">
	价格日历：
</el-col>
<el-col :span="20">
	<pricecalendar 
	v-bind:dayprice.sync="item.daypricelist"
	v-bind:showattrarr.sync="showattrarr"
	v-bind:attrid.sync="item.attr_id"
	v-bind:refresh="refresh"
	v-on:batchsetup-save="batchsetupSave"
	>
	</pricecalendar>
</el-col>
</el-row>

  </el-collapse-item>
  
</el-collapse>
</div>

<el-button type="primary" size="medium" class="mt20" @click="create()">添加一个型号</el-button>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import pricecalendar from '../../../components/pricecalendar'

export default {
	name: 'model',

	data () {
		return {
		  	//modellist : this.productDetail.attrlist,

		  	activeName : -1,

		  	rules: {
	          attr_name: [
	            { required: true, message: '请输入型号名称', trigger: 'blur' },
	            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
	          ],
	          guide_price: [
	          	{ required: true, message: '商城价格不能为空', trigger: 'blur' },
	          	{ type: 'number', message: '商城价格必须为数字值'}
	          ],
	          cost_price: [
	          	{ required: true, message: '同业价格不能为空', trigger: 'blur' },
	          	{ type: 'number', message: '同业价格必须为数字值'}
	          ],
	          current_stock_num: [
	          	{ required: true, message: '库存不能为空', trigger: 'blur' },
	          	{ type: 'number', message: '库存必须为数字值'}
	          ],
	          order_limit_num: [
	          	{ required: true, message: '限制数量不能为空', trigger: 'blur' },
	          	{ type: 'number', message: '限制数量必须为数字值'}
	          ],
	        },


	        showattrarr : [
				{
					'key' : 'guide_price',
					'position' : 'left',
					'before' : '卖价：¥ '
				},
				{
					'key' : 'cost_price',
					'position' : 'left',
					'before' : '同业：¥ '
				},
				{
					'key' : 'current_stock_num',
					'position' : 'left',
					'before' : '库存：',
					//'after' : '个',
				}
			],


			refresh : 0,
		}
	},

	props: {
		productDetail : Object,
	},

	components: {
		pricecalendar,
	},

	computed : {
		...mapGetters([
			
		]),

		modellist () {
			// if(this.productDetail.sale_belong == 'weshop_royaloc'){
			// 	for(var i = 0; i < this.productDetail.attrlist.length; i++){
			// 		var tmp = this.productDetail.attrlist[i];
			// 		tmp['sysaffirm_target_goods_child_flag'] = '0';
			// 	}
			// }
			if(this.productDetail.price_type == '1'){
				console.log('modellist 中的方法');
				this.refresh = (new Date()).getTime();
			}
			return this.productDetail.attrlist;
		},
	},

	methods : {

		onSubmit (item, formName) {
			console.log('1111');
			console.log(item);
			this.$refs[formName][0].validate((valid) => {

				if(item.cost_price > item.guide_price){
					this.$message.error('同业价格不能大于商城价格');
					return;
				}

		        if (valid) {
		            this.updateModel(item);
		        } else {
		            console.log('error submit!!');
		            return false;
		        }
	        });
			
		},

		up (item, formName) {
			item.state = '1';
			this.onSubmit(item, formName);
		},

		down (item, formName) {
			item.state = '2';
			this.onSubmit(item, formName);
		},

		create () {
			var obj = {
				sale_code : this.productDetail.sale_code, 
				attr_name : '', 
				cost_price : 0, 
				guide_price : 0, 
				asort : '0',
				stock_type : '0', 
				current_stock_num : 0, 
				order_num_state : '0', 
				order_limit_num : 0, 
				order_limit_type : '0', 
				state : '2', 
				cb : (res) => {
					console.log('lajsdljasldjsaljdasldjsa');
					console.log(res);
				}
			};

			if(this.productDetail.price_type == '1'){
				obj['daypricelist'] = [];
			}

			if(this.productDetail.sale_belong === 'weshop_royaloc'){
				obj['sysaffirm_target_goods_child_flag'] = '0';
			}

			this.modellist.push(obj);
			this.activeName = this.modellist.length - 1;
		},

		updateModel (item) {
			console.log('updateModel');
			console.log(item);
			var para = {
				attr_id : item.attr_id, 
				sale_code : item.sale_code, 
				attr_name : item.attr_name, 
				cost_price : item.cost_price, 
				guide_price : item.guide_price, 
				stock_type : item.stock_type, 
				current_stock_num : item.current_stock_num, 
				order_num_state : item.order_num_state, 
				order_limit_num : item.order_limit_num, 
				order_limit_type : item.order_limit_type, 
				state : item.state, 
				remark : item.remark,
				asort : item.asort,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });

			        this.$emit('reload');
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			//票付通
			if(this.productDetail.sale_belong == 'weshop_piaofutong'){
				para['sysaffirm_target_goods_supply'] = item.sysaffirm_target_goods_supply;
		        para['sysaffirm_target_goods_view'] = item.sysaffirm_target_goods_view;
		        para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
			}
			//居游
			else if(this.productDetail.sale_belong == 'weshop_juyou'){
				para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
			}
			//天时同城
			else if(this.productDetail.sale_belong === 'weshop_tstc_al'
 				 || this.productDetail.sale_belong === 'weshop_tstc_bg'){
				para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
			}
			//海洋馆
			else if(this.productDetail.sale_belong === 'weshop_royaloc'){
				console.log('对接海洋馆');
				para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
		        para['sysaffirm_target_goods_child_flag'] = item.sysaffirm_target_goods_child_flag;
			}
			//银科环企
			else if(this.productDetail.sale_belong === 'weshop_yinkehuanqi'){
				console.log('对接银科环企');
				para['sysaffirm_target_goods_view'] = item.sysaffirm_target_goods_view;
		        para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
			}
			//自游宝
			else if(this.productDetail.sale_belong === 'weshop_zhiyoubao'){
				console.log('对接自游宝');
		        para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
			}
			//自我游
			else if(this.productDetail.sale_belong === 'weshop_ziwoyou'){
				console.log('对接自我游');
		        para['sysaffirm_target_goods_code'] = item.sysaffirm_target_goods_code;
		        para['sysaffirm_target_goods_view'] = 'link_credit_type,link_credit_no';
		        para['sysaffirm_target_goods_supply'] = '1';
			}

			console.log(para);

			this.$store.dispatch('updateModel', para);
		},


		batchsetupSave (para) {
			for(var i = 0; i < para.list.length; i++){
				var tmp = para.list[i];
				tmp['sale_code'] = this.productDetail.sale_code;
			}

			console.log(para);

			let p = {
				fun : 'updateDayPrice',
				daylist : para.list,
				cb : res => {
					console.log(res);
					this.$emit('reload');
					para.cb();
				},
				error : res => {

				}
			}

			this.$store.dispatch('update', p);
		},
	},

	watch : {
	    
	},

	mounted () {
		
		
	},

}
</script>

<style scoped>
.model {
	border: 1px solid #ebeef5;
	padding: 0 20px;
}
</style>
